<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
        <div class="ye_wrap" v-for="item in orderList" :key="item.id" :title="item.title">
          <div class="ye_radius">
            <ul>
              <li v-for="i in item.list" :key="i.id">
                <van-card
                  :num="i.num"
                  :price="i.marketPrice"
                  :desc="i.introduce"
                  :title="i.title"
                  :thumb="i.imageUrl"
                ></van-card>
              </li>
            </ul>
            <div class="button-wrap">
              <van-button size="small" v-if="item.status==='0'">查看订单</van-button>
              <van-button size="small" v-if="item.status==='1'" @click="paymentHandle(item)">取消订单</van-button>
              <van-button size="small" v-if="item.status==='1'" @click="paymentHandle(item)">去付款</van-button>
              <van-button size="small" v-if="item.status==='2'" @click="urgeHandle">催单</van-button>
              <van-button size="small" v-if="item.status==='2'" @click="outHandle(item)">假装发货了</van-button>
              <van-button size="small" v-if="item.status==='3'">查看物流</van-button>
              <van-button size="small" v-if="item.status==='3'" @click="receiptHandle(item)">确认收货</van-button>
              <van-button size="small" v-if="item.status==='4'" @click="commentHandle(item)">去评论</van-button>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getOrderList, editOrder } from "@/api/order.js";
import Vue from "vue";
import { Card } from "vant";
import { List } from "vant";
import { Button } from "vant";
import { Dialog } from "vant";
import { Notify } from "vant";
import { PullRefresh } from "vant";

Vue.use(PullRefresh);
Vue.use(Button);
Vue.use(Card);
Vue.use(List);
export default {
  data() {
    return {
      orderList: [],
      loading: false,
      finished: false,
      isLoading: false
    };
  },
  methods: {
    async getData() {
      let rs;
      if (this.$route.params.status === "0") {
        rs = await getOrderList();
      } else {
        rs = await getOrderList({ status: this.$route.params.status });
        console.log(rs);
      }
      this.orderList = rs.data;
      this.finished = true;
    },
    // 下拉刷新
    onRefresh() {
      this.getData();
      this.isLoading = false;
    },
    // 去付款
    paymentHandle(item) {
      Dialog.confirm({
        message: "点击确定假装付款了"
      })
        .then(async () => {
          item.status = "2";
          let rs = await editOrder(item);
          if (rs.status === 200) {
            Notify({ type: "success", message: "白嫖成功!" });
            this.getData();
          } else {
            Notify({ type: "danger", message: "付款失败请重试" });
          }
        })
        .catch(() => {
          // Notify({ type: "danger", message: "付款失败请重试" });
        });
    },
    // 催单
    urgeHandle() {
      Dialog({ message: "稍安勿躁 已经通知商家了哦!" });
    },
    // 假装发货了
    outHandle(item) {
      Dialog.confirm({
        message: "点击确定假装发货了"
      })
        .then(async () => {
          item.status = "3";
          let rs = await editOrder(item);
          if (rs.status === 200) {
            Notify({ type: "success", message: "发货啦!" });
            this.getData();
          } else {
            Notify({ type: "danger", message: "请重试" });
          }
        })
        .catch(() => {
          // Notify({ type: "danger", message: "请重试" });
        });
    },
    // 确认收货
    receiptHandle(item) {
      Dialog.confirm({
        message: "是否确认收货?"
      })
        .then(async () => {
          item.status = "4";
          let rs = await editOrder(item);
          if (rs.status === 200) {
            this.getData();
            Notify({ type: "success", message: "收货成功!请前往评价" });
          } else {
            Notify({ type: "danger", message: "收货失败请重试" });
          }
        })
        .catch(() => {
          // Notify({ type: "danger", message: "收货失败请重试" });
        });
    },
    // 去评论
    commentHandle(item) {
      this.$router.push({ path: "/commit", query: { id: item.id } });
    }
  },
  created() {
    this.getData();
  },
  watch: {
    $route(to, from) {
      this.getData();
    }
  },
  components: {
    Card
  }
};
</script>

<style lang="stylus" scoped>
.van-card {
  background-color: #fff !important;
}

.button-wrap {
  text-align: right;
  margin-top: 0.1rem;
  padding-right: 0.2rem;
  margin-bottom: 0.1rem;
}

.van-button {
  margin: 0 0.04rem;
}
</style>